import React from 'react';
import { Disclosure } from '@headlessui/react';
import { FiChevronDown } from 'react-icons/fi';

const FAQ = () => {
  const faqs = [
    {
      question: "FlyLaTeX 支持哪些模板？",
      answer: "FlyLaTeX 支持国内众多高校论文模板，更多可以前往：<a target='_blank' href='https://www.flylatex.cn/static/templates.html'>模板中心</a>查看"
    },
    {
      question: "FlyLaTeX 是否支持离线使用？",
      answer: "FlyLaTeX 主要是一个在线服务，但我们提供本地缓存功能，让您在离线时也能继续编辑文档。"
    },
    {
      question: "如何在 FlyLaTeX 中插入图片？",
      answer: "您可以直接拖拽图片到编辑器中，或使用工具栏中的图片上传功能。我们支持常见的图片格式。"
    },
    {
      question: "FlyLaTeX 支持哪些文档类型？",
      answer: "我们支持论文、报告、演示文稿等多种文档类型，并提供相应的模板。"
    },
    {
      question: "如何与他人协作编辑文档？",
      answer: "只需通过邮箱或链接邀请协作者，即可实现多人实时协作编辑。"
    },
    {
      question: "FlyLaTeX 系统帮助或者文档在哪里？",
      answer: "您可以访问帮助文档: <a target='_blank' href='https://www.flylatex.cn/pdf-viewer.html?pdf=./Files/FlyLaTeX.pdf'>在线帮助</a><br/>或者点击页面右下角的AI小助手进行咨询"
    }
  ];

  return (
    <div className="py-20 bg-gray-50">
      <div className="container mx-auto px-6" id="faq">
        <h2 className="text-3xl font-bold text-center mb-16">常见问题</h2>
        <div className="max-w-3xl mx-auto">
          {faqs.map((faq, index) => (
            <Disclosure key={index} as="div" className="mt-4">
              {({ open }) => (
                <>
                  <Disclosure.Button className="flex justify-between w-full px-4 py-3 text-lg font-medium text-left text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:outline-none focus-visible:ring">
                    <span>{faq.question}</span>
                    <FiChevronDown
                      className={`${
                        open ? 'transform rotate-180' : ''
                      } w-5 h-5 text-blue-500`}
                    />
                  </Disclosure.Button>
                  <Disclosure.Panel className="px-4 pt-4 pb-2 text-gray-600">
                    <div dangerouslySetInnerHTML={{ __html: faq.answer }} />
                  </Disclosure.Panel>
                </>
              )}
            </Disclosure>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FAQ;